<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框</title>
    <style>
        .box {
            width: 130px;
            height: 100px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .box .checkBox:hover {
            background-color: rgb(36, 167, 219);
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
        <input type="checkbox" class="checkBox">
    </div>

    <script>
        // 思路：获取鼠标起始位置，以及终止位置，在鼠标移动过程中判断复选框是否在矩形内部，
        // 为了使选框选取过程是实时且流畅，应当对鼠标事件加入防抖
        var el = document.getElementsByClassName('checkBox')
        var firstx = 0
        var firsty = 0
        var endx = 0
        var endy = 0
        document.onmousedown = function (e) {
            firstx = e.clientX
            firsty = e.clientY
            var checkDiv = document.createElement('div')
            checkDiv.style.cssText =
                'position:absolute;width:0;height:0;margin:0;padding:0;border:1px dashed #aaa;z-index:1000;opacity:0.6;display:none;';
            checkDiv.id = 'checkedDiv'
            document.body.appendChild(checkDiv)
            checkDiv.style.left = firstx + 'px';
            checkDiv.style.top = firsty + 'px';
            document.onmousemove = function (e) {
                endx = e.clientX
                endy = e.clientY
                e.stopPropagation()
                var checkDiv = document.getElementById('checkedDiv')
                checkDiv.style.display = 'block'
                checkDiv.style.left = Math.min(e.clientX, firstx) + 'px'
                checkDiv.style.top = Math.min(e.clientY, firsty) + 'px'
                checkDiv.style.width = Math.abs(e.clientX - firstx) + 'px'
                checkDiv.style.height = Math.abs(e.clientY - firsty) + 'px'
                for (let i = 0; i < el.length; i++) {
                    if (el[i].offsetLeft + 13 >= firstx && el[i].offsetLeft <= endx && el[i].offsetTop + 13 >=

                        firsty && el[i].offsetTop <= endy) {
                        el[i].checked = !el[i].checked

                    } else if (el[i].offsetLeft <= firstx && el[i].offsetLeft + 13 >= endx && el[i].offsetTop +
                        13 >=
                        firsty && el[i].offsetTop <= endy) {

                        el[i].checked = !el[i].checked

                    } else if (el[i].offsetLeft <= firstx && el[i].offsetLeft + 13 >= endx && el[i]
                        .offsetTop <=
                        firsty && el[i].offsetTop + 13 >= endy) {

                        el[i].checked = !el[i].checked

                    } else if (el[i].offsetLeft + 13 >= firstx && el[i].offsetLeft <= endx && el[i]
                        .offsetTop <=
                        firsty && el[i].offsetTop + 13 >= endy) {

                        el[i].checked = !el[i].checked

                    }

                }

            }
        }

        document.onmouseup = function (e) {
            var checkDiv = document.getElementById('checkedDiv')
            document.body.removeChild(checkDiv)
            document.onmousemove = null
        }


        function debounce(fun, wait) { //fun:事件处理函数， wait:延迟时间
            var timer; //维护全局纯净，借助闭包来实现
            return function () {
                if (timer) { //timer有值为真，这个事件已经触发了一次，重新开始计数
                    clearTimeout(timer);
                }
                timer = setTimeout(function () {
                    fun();
                }, wait);
            }
        }
        let print = debounce(e => {
            let value = e.target.value;
            console.log(value, new Date());
        }, 1000);
        document.querySelector('#input')
            .addEventListener('input', print, false)
    </script>

</body>

</html>